﻿<template>
  <div class="searchbox">
    <el-row>
      <el-col class="dt" :span="3">商品名：</el-col>
      <el-col class="dd" :span="7">
        <el-input class="wide" v-model="data.flowerName" clearable placeholder="商品名" size="mini" />
      </el-col>
      <el-col class="dt" :span="3">特征：</el-col>
      <el-col class="dd" :span="7">
        <el-input class="wide" v-model="data.flowerDescription" clearable placeholder="商品描述" size="mini" />
      </el-col>
      <el-col :span="4" class="dd text-right">
        <el-button size="mini" type="danger" @click="handleSearch">检索</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col class="dt" :span="3">商品号：</el-col>
      <el-col class="dd" :span="7">
        <el-input class="wide" v-model="data.flowerNO" clearable placeholder="商品号" size="mini" />
      </el-col>
    </el-row>
    <el-row class="query-condition">
      <el-col class="dt" :span="3">搜索条件：</el-col>
      <el-col class="dd" :span="16">
        <el-tag v-for="query in queryDict" :key="query.key" size="small" closable @close="onCloseTag(query.key)">
          <span class="tag-key">{{query.keyName}}:</span>{{query.text}}
        </el-tag>
      </el-col>
      <el-col class="dd text-right" :span="5">
        <el-button size="mini" @click="onResetSearch">重置条件</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      queryDict: [],
      data: {
        flowerName: '',
        flowerDescription:'',
        flowerNO:'',
      },
    };
  },
  methods: {
    handleChange(){
      this.$emit('query-change', this.data);
    },
    handleSearch(){
      if (this.data.flowerName !== '') {
        this.buildQueryDict('flowerName', '商品名', this.data.flowerName);
      } else {
        let index = this.queryDict.findIndex(x => x.key === 'flowerName');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
      }
      if (this.data.flowerDescription !== '') {
        this.buildQueryDict('flowerDescription', '商品描述', this.data.flowerDescription);
      } else {
        let index = this.queryDict.findIndex(x => x.key === 'flowerDescription');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
      }
      if (this.data.flowerNO !== '') {
        this.buildQueryDict('flowerNO', '商品号', this.data.flowerNO);
      } else {
        let index = this.queryDict.findIndex(x => x.key === 'flowerNO');
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
      }
      this.handleChange();
    },
    onResetSearch() {
      this.data.flowerName = '';
      this.data.flowerDescription = '';
      this.data.flowerNO = '';
      this.queryDict = [];
      this.handleChange();
    },
    buildQueryDict(key, keyName, text) {
      let index = this.queryDict.findIndex(x => x.key === key);
      if (index >= 0) {
        this.queryDict.splice(index, 1);
      }
      if (text != null && text !== '') {
        this.queryDict.push({
          key: key,
          keyName: keyName,
          text: text
        });
      }
    },
    onCloseTag(key) {
      let index = this.queryDict.findIndex(x => x.key === key);
      if (index >= 0) {
        this.queryDict.splice(index, 1);
        this.removeKey(key);
      }
      this.handleChange();
    },
    removeKey(key) {
      switch (key) {
       case 'flowerName':
         this.data.flowerName = '';
         break;
       case 'flowerDescription':
         this.data.flowerDescription = '';
         break;
       case 'flowerNO':
         this.data.flowerNO = '';
         break;
      }
    },
  }
};
</script>
